<template>
  <el-row :gutter="20" class="article-list-container">
    <!-- 页面标题 -->
    <el-col :span="24">
      <div class="page-header">
        <h2>文章列表</h2>
      </div>
    </el-col>
    
    <!-- 加载状态 -->
    <el-col :span="24" v-if="loading">
      <div class="loading-state">
        <el-spinner size="large" />
        <p>加载中...</p>
      </div>
    </el-col>
    
    <!-- 文章列表 - 使用栅格布局 -->
    <el-col :span="24" v-else-if="articles.length > 0">
      <el-row :gutter="20" class="article-list">
        <el-col 
          v-for="article in articles" 
          :key="article.id"
          :xs="24"
          :sm="24"
          :md="12"
          :lg="8"
        >
          <div class="article-item">
            <router-link :to="'/article/' + article.id" class="article-link">
              <h3 class="article-title">{{ article.title }}</h3>
              <p class="article-excerpt">{{ getExcerpt(article.content) }}</p>
              <div class="article-meta">
                <span class="publish-time">{{ formatDate(article.createTime) }}</span>
                <span class="category">{{ article.category || '未分类' }}</span>
                <span class="read-count">阅读 {{ article.readCount || 0 }}</span>
              </div>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </el-col>
    
    <!-- 空状态 -->
    <el-col :span="24" v-else>
      <div class="empty-state">
        <el-empty description="暂无文章" />
      </div>
    </el-col>
    
    <!-- 分页组件 -->
    <el-col :span="24" v-if="pageInfo.total > 0">
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageInfo.pageNum"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useArticleStore } from '../../store/articleStore'

export default {
  name: 'ArticleList',
  setup() {
    const articleStore = useArticleStore()
    const articles = ref([])
    const loading = ref(false)
    const pageInfo = reactive({
      pageNum: 1,
      pageSize: 10,
      total: 0
    })
    const isMobile = ref(window.innerWidth <= 768)

    // 获取文章列表
    const fetchArticles = async () => {
      loading.value = true
      try {
        const result = await articleStore.fetchArticlePage(pageInfo.pageNum, pageInfo.pageSize)
        articles.value = result?.records || []
        pageInfo.total = result?.totalRow || 0
      } catch (error) {
        console.error('获取文章列表失败:', error)
      } finally {
        loading.value = false
      }
    }

    // 截取文章摘要
    const getExcerpt = (content, length = 150) => {
      if (!content) return ''
      // 去除HTML标签
      const plainText = content.replace(/<[^>]*>/g, '')
      return plainText.length > length ? plainText.substring(0, length) + '...' : plainText
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }

    // 处理每页条数变化
    const handleSizeChange = (size) => {
      pageInfo.pageSize = size
      pageInfo.pageNum = 1
      fetchArticles()
    }

    // 处理页码变化
    const handleCurrentChange = (current) => {
      pageInfo.pageNum = current
      fetchArticles()
    }

    // 处理窗口大小变化
    const handleResize = () => {
      isMobile.value = window.innerWidth <= 768
    }

    onMounted(() => {
      fetchArticles()
      window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })

    return {
      articles,
      loading,
      pageInfo,
      isMobile,
      getExcerpt,
      formatDate,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
    })

    return {
      articles,
      loading,
      pageInfo,
      getExcerpt,
      formatDate,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.article-list-container {
  width: 100%;
  padding: 0 15px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  font-size: 2rem;
  color: #333;
  padding-bottom: 10px;
  position: relative;
  margin: 0;
}

.page-header h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background-color: #1890ff;
}

.article-list {
  margin-bottom: 30px;
}

.article-item {
  background-color: white;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.article-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.article-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.article-title {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #333;
  transition: color 0.3s;
  font-weight: 600;
  line-height: 1.4;
}

.article-link:hover .article-title {
  color: #1890ff;
}

.article-excerpt {
  flex: 1;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.7;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 0.9rem;
  color: #999;
}

.pagination {
  margin-top: 40px;
  text-align: center;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999;
  gap: 10px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .article-list-container {
    padding: 0 10px;
  }
  
  .page-header h2 {
    font-size: 1.75rem;
  }
  
  .article-item {
    padding: 20px;
  }
  
  .article-title {
    font-size: 1.3rem;
  }
  
  .article-meta {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .page-header {
    margin-bottom: 20px;
  }
  
  .page-header h2 {
    font-size: 1.5rem;
  }
  
  .article-item {
    padding: 15px;
  }
  
  .article-title {
    font-size: 1.2rem;
  }
  
  .article-excerpt {
    font-size: 0.9rem;
  }
  
  .article-meta {
    font-size: 0.8rem;
  }
  
  .pagination {
    margin-top: 25px;
  }
}

/* Element Plus 分页组件在移动端的优化 */
:deep(.el-pagination) {
  font-size: 14px;
}

@media (max-width: 480px) {
  :deep(.el-pagination) {
    font-size: 12px;
  }
}
</style>